<template>
  <el-input v-model="query" style="width: 20%"></el-input>
  <el-button @click="searchUser" type="primary">资料检索</el-button><br>
  <el-table :data="tableData" style="width: 100%" >
    <el-table-column prop="userName" label="账户" width="180" />
    <el-table-column prop="name" label="昵称" width="180" />
    <el-table-column prop="sex" label="性别" width="180" />
    <el-table-column prop="age" label="年龄" width="180" />
    <el-table-column prop="phone" label="电话"  width="180"/>
    <el-table-column prop="note" label="备注" width="180" />
    <el-table-column align="right">

      <template #default="scope">
        <el-button size="small"
                   type="warning"
                   @click="sendRequest(scope.$index, scope.row)"
        >警告</el-button
        >
        <el-button
            type="danger"
            size="small"
            @click="suspend(scope.$index)">
          封号
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "UserManageMentView",
  data(){
    return{
      tableData:'',
      query:''
    }
  },
  created() {
    const _this=this
    axios({
      method: 'post',
      url: 'http://localhost:8081/showUser',
      params: {}
    })
        .then(function (response) {

          console.log(response)
          _this.tableData = response.data

        })
        .catch(function (error) {
          console.log(error);
        });
  },
  methods:{
    searchUser(){
      const _this=this
      axios({
        method: 'post',
        url: 'http://localhost:8081/flexibleQueryUser',
        params: {
          query:this.query
        }
      })
          .then(function (response) {

            console.log(response)
            _this.tableData = response.data

          })
          .catch(function (error) {
            console.log(error);
          });
    },
      suspend(index){
        /*  if(this.button_title=="封号"){
            this.button_title="解封";
          }else {
            this.button_title="";
          }*/
        const isSuspend =confirm("将对发送者账号封禁，请谨慎操作")
        if(isSuspend){
          ElMessage({
            message:"封号成功",
            type:"success"
          })
          axios({
            method: 'post',
            url: 'http://localhost:8081/suspendUser',
            params: {
              userName:this.tableData.at(index).userName
            }
          })
              .then(function (response) {

                console.log(response)

              })
              .catch(function (error) {
                console.log(error);
              });
        }
      }

  }
  }
</script>

<style scoped>

</style>